<template>
	<view class="login-class">
		
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
		<view class="tn-flex justify-end">
			<tn-icon name="set-fill tn-pt-xl tn-pr-xl" size="50" color="#0000FF" @click="doSetting"></tn-icon>
		</view>
		
		<view class="logo-box-class">
		    <view class="logo-class"></view>
		</view>
		<form>
			<view class="login-input-class">
				<tn-input v-model="userInfo.userName" placeholder="请输入用户名" class="input-class tn-shadow-md tn-round tn-text-bold" 
					:placeholder-style="placeholderStyle" :border="false">
					<template #prefix>
						<tn-icon name="my-simple" size="50" color="#FFFFFF"  />
					</template>
				</tn-input>
				
				<tn-input v-model="userInfo.passWord" placeholder="请输入密码" class="input-class tn-shadow-md tn-round tn-text-bold" 
					:placeholder-style="placeholderStyle"  :border="false" type="password">
					<template #prefix>
					  <tn-icon name="lock" size="50" color="#FFFFFF"  />
					</template>
				</tn-input>
				
				<!-- <tn-button  width="80vw" class="tn-p-sm" @click="doLogin"  :custom-style="buttonClass">登录</tn-button> -->
				<button class="button-class" @click="doLogin">登录</button>
				
				<!-- <view class="register-class tn-pt-xs tn-mt-xs "> 还没有账号？ <span class="span-class" @click="doRegister">注册</span></view> -->
			</view>
		</form>
	</view>
	<!-- 578710459088965 龙心 -->
	<!-- 543432941621317 药都汇 -->
	<wrap-version-update id="543432941621317" v-if="isAppInstance"></wrap-version-update>
</template>

<script setup>
	import WrapVersionUpdate from '@/uni_modules/wrap-version-update/components/wrap-version-update/wrap-version-update.nvue'

	import { ref ,reactive,onMounted } from 'vue'
	import { postLogin,postUserInfo  } from '@/api/index.js'
	import { toastMessage } from '@/utils/toast.js'
	import md5 from "js-md5";
	const  isAppInstance = ref(true);
	if(process.env.UNI_PLATFORM === 'h5'){
		isAppInstance.value = false;
	}
	// const  isAppInstance  =  inject('isAppInstance');
	// console.log(isAppInstance);
	// import { } from	const mobile = ref('')
	const  backgroundImageUrl  =  ref('');
	const logoImageUrl = ref('');
	const placeholderStyle = reactive({
		color : "#FFFFFF"
	})
	const userInfo = reactive({
		userName : "",
		passWord : ""
	})
	onMounted(()=>{
		const loginUserInfo = uni.getStorageSync("LOGINUSER");
		if(loginUserInfo){
			Object.assign(userInfo,loginUserInfo);
		}
		
		console.log("==");
		
		//设置背景
		
		const httpUrl = uni.getStorageSync("HTTP");
		backgroundImageUrl.value  =  httpUrl+'/static/bg.jpg';
		logoImageUrl.value = httpUrl + '/static/logo.png'
		const  loginElement  =  document.querySelector('.login-class');
		loginElement.style.backgroundImage  =  `url('${backgroundImageUrl.value}')`;
		const logoElement = document.querySelector(".logo-class");
		logoElement.style.backgroundImage  =  `url('${logoImageUrl.value}')`;
	})
	const buttonClass = {
		bgColor	:"inear-gradient(to right, #47A6C2, #3F90D4)"
	}
	
	let doLogin = () =>{
		let loginParams = {};
		loginParams.P_LGNNAME = userInfo.userName;
		loginParams.P_PWD = md5(userInfo.passWord);
		postLogin(loginParams).then(res=>{;
			uni.setStorageSync("token", res.data.token);
			postUserInfo().then(res=>{
				if(res){
					if(res.code===200){
						uni.setStorageSync("LOGINUSER", userInfo);
						if(uni.getStorageSync("CLIENTINFO")){
							uni.removeStorageSync("CLIENTINFO")
						}
						// uni.setStorageSync("USERINFO", res.data.DATASET[0]);
						uni.setStorage({
						    key: 'USERINFO',
						    data: res.data.DATASET[0],
						    success: function () {
						        uni.navigateTo({
						        	url: '/pages/index/index'
						        });
						    }
						});
					}else{
						toastMessage("当前账号未绑定部门信息！！")
					}
				}
				
			})
		})
	}
	
	const doRegister = ()=>{
		uni.navigateTo({
			url: '/pages/register/register'
		});
	}
	const doSetting = ()=>{
		uni.navigateTo({
			url: '/pages/setting/setting'
		});
	}
</script>

<style scoped>

.login-class{
	height: 100vh;
	overflow: hidden;
	/* background: url('/static/bg.jpg'); */
	/* background: url('http://120.46.135.233:9533/ydh/static/bg.jpg'); */
	background-position: center;
	background-size: cover;
	position: fixed;
	width: 100vw;
}
.logo-box-class{
	height: 40vh;
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 上下居中对齐 */
}
.logo-class{
	width: 150px; /* 设置 logo 宽度 */
	height: 150px; /* 高度自适应 */
	/* background-image: url('/static/logo.png'); */ /* 设置背景图片 */
	/*background-image: url('http://120.46.135.233:9533/ydh/static/logo.png'); */
	background-size: contain; /* 图片自适应容器大小 */
	background-position: center; /* 图片居中显示 */
	background-repeat: no-repeat; /* 背景图不重复 */
}
.login-input-class{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.input-class{
	width: 80vw;
	margin-bottom: 20px;
	border-radius: 40px;
}
.button-class{
	width: 80vw;
	/* padding: 15px !important; */
	border-radius: 40px !important;
	color: #FFFFFF !important;
	background: linear-gradient(to right, #47A6C2, #3F90D4) !important;
	border: 0px solid rgba(0, 0, 0, 0.2) !important;
}

.button-class::after{
	border: 0px solid rgba(0, 0, 0, 0.2) !important;
}

.span-class{
	color: #FFFFFF;
}
.register-class{
	margin-top: 3vh;
}
</style>
